<template>
  <div class="service">
    <div class="charge-title"> 
      <i class="el-icon-arrow-left" @click=toPage()></i>
      <span class=jiaofei-text> 二维码开锁 </span>
    </div>
    
     <div class="type-info-address">
        <i class="el-icon-user-solid"></i>
        <div class="type-text">我的二维码</div>
      </div>
    <div class="typetextarea">
      <img src="./img/欢迎来到物业管理系统--二维码.png">
      <div class="info">
        <span>
        <strong>业主:</strong> patrick
        </span>
        </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'remoteunclock',
  data() {
      return {
        
      }
    },
  methods: {
      

     toPage(text){
       this.selectcharge=text;
       console.log(this.selectcharge);
       this.$router.push({
      path: '/Services'
    })
    },
    commit(){
        this.$confirm(
        '地址：'+this.inputnumber+'<br>', '是否确认开锁？', {
          customClass: 'message-logout12',
           dangerouslyUseHTMLString: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '开锁成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    }
   
},

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.message-logout12 {
    width: 300px;
    margin-top:100px;
    background-color:#bcc9c5;
  }
</style>
<style scoped>


.i{
  font-size:30px;
  margin-top:25px;
  margin-bottom: 10px;
}
 
.el-icon-user-solid{
  color:#6a8171;
  font-size:24px;
  margin-top:13px;
  margin-left:7px;
}

.type-text{
   height:20px;
   width:120px;
   font-size:15px;
   margin-top:14px;
   margin-left:7px;

 }
 
.type-info-address{
  display: flex;
  height:60px;
 
}
.type-info-text{
  height:20px;
  width:80px;
  margin-top:20px;
  margin-left:17px;
  font-size: 15px;
}

.typetextarea{
  height:325px;
  width:345px;
  margin-top:10px;
  margin-left:7px;
  border-radius: 10px;
  background-color: whitesmoke;
  box-shadow: 0 2px 20px  rgba(232, 233, 232, 0.747) inset;
}
 .jiaofei-text{
   width:100px;
   margin-left:123px;
 }
  .el-icon-arrow-left{
    font-size:18px;
    margin-top:27px;
    font-weight: bold;
  }

  img{
    height:240px;
    width:240px;
    margin-top:20px;
    margin-left:50px;
    border-radius: 10px;
  }
  .info{
    height:100px;
    width:200px;
    margin-top:10px;
    margin-left:60px;
    line-height: 30px;
    font-size:15px;
    text-align: center;
  }
 
</style>
